<script setup lang="ts" name="Input">
   import { ref } from "vue";
   
   let userName = ref('')


//    <string> 可以断言 相当于  as string

</script>

<template>
  <div class="Input">
  <hr>=== input =====</hr>
  <!-- v-model底层原理是实现双向数据绑定 -->
     <input type="text" v-model="userName" placeholder="请输入姓名" > 
     <!--  和上句话基本上是等价的 v-model -->
     <input type="text" :vaue="userName" @input="userName = (<HTMLInputElement>$event.target).value" >


  </div>
 
</template>

<style scoped>
.person {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

button:hover {
    margin-top: 10px;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    filter: drop-shadow(0 0 2em #d4d643aa);
}

Input:hover {
    margin-top: 10px;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    filter: drop-shadow(0 0 2em #d4d643aa);
}
</style>
